<template>
    <el-card class="box-card">
        <el-row :gutter="20">
            <el-col :span="7">
                <div class="grid-content ep-bg-purple">
                    <el-icon>
                        <Histogram />
                    </el-icon>&nbsp;
                    <span>经营数据</span>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple"></div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content ep-bg-purple" style="font-size:14px;margin-top:8px">选择日期:</div>
            </el-col>
            <el-col :span="9">
                <div class="grid-content ep-bg-purple">
                    <div class="block">

                        <el-date-picker v-model="value2" type="daterange" start-placeholder="开始时间"
                            end-placeholder="结束时间" :default-value="[new Date(2022, 11, 4), new Date(2022, 11, 31)]" />
                    </div>
                </div>

            </el-col>
        </el-row>
        <el-divider>
            <el-icon>
                <star-filled />
            </el-icon>
        </el-divider>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box-card1">
                    <span>今日订单总额</span>&nbsp;
                    <el-icon>
                        <Coordinate />
                    </el-icon>
                    <p>$194343.00</p>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card2">
                    <span>今日订单总数</span>&nbsp;
                    <el-icon>
                        <Postcard />
                    </el-icon>
                    <p>543543 件</p>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card3">
                    <span>新增会员</span>&nbsp;
                    <el-icon>
                        <Coffee />
                    </el-icon>
                    <p>5832 人</p>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card4">
                    <span>门店实况</span>&nbsp;
                    <el-icon>
                        <Place />
                    </el-icon>
                    <p>无投诉发生</p>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
    <div class="middle1">
        <el-row>
            <el-col :span="11">
                <el-card>
                    <div>
                        <el-icon>
                            <Wallet />
                        </el-icon>&nbsp;
                        <span>商品概况</span>
                    </div>
                    <el-divider>
                    </el-divider>
                    <el-row>
                        <el-col :span="1"></el-col> 
                        <el-col :span="7">
                            <el-card>
                                <div>
                                    <el-icon>
                                        <Wallet />
                                    </el-icon>&nbsp;
                                    <span style="font-size:14px">商品总数</span>
                                </div>
                                <hr style="background:#dcdfe6;noshade='noshade'">
                                <p>543543 款</p>
                            </el-card>
                        </el-col>
                        <el-col :span="1"></el-col>
                        <el-col :span="7">
                            <el-card>
                                <div>
                                    <el-icon>
                                        <Notification />
                                    </el-icon>&nbsp;
                                    <span style="font-size:14px">销售总数</span>
                                </div>
                                <hr style="background:#dcdfe6;noshade='noshade';size:0">
                                <p>928443 件</p>
                            </el-card>
                        </el-col>
                        <el-col :span="1"></el-col>
                        <el-col :span="7">
                            <el-card>
                                <div>
                                    <el-icon>
                                        <PieChart />
                                    </el-icon>&nbsp;
                                    <span style="font-size:14px">销售总额</span>
                                </div>
                                <hr style="background:#dcdfe6;noshade='noshade'">
                                <p>￥328 万元</p>
                            </el-card>
                        </el-col>
                        

                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="11">
                <el-card>
                    <div>
                        <el-icon>
                            <CollectionTag />
                        </el-icon>&nbsp;
                        <span>用户概况</span>
                    </div>
                    <el-divider>
                    </el-divider>
                    <el-row>
                        
                        <el-col :span="1"></el-col>
                        <el-col :span="7">
                            <el-card>
                                <div>
                                    <el-icon>
                                        <User />
                                    </el-icon>&nbsp;
                                    <span style="font-size:14px">会员总数</span>
                                </div>
                                <hr style="background:#dcdfe6;noshade='noshade'">
                                <p>543543 人</p>
                            </el-card>
                        </el-col>
                        <el-col :span="1"></el-col>
                        <el-col :span="7">
                            <el-card>
                                <div>
                                    <el-icon>
                                        <Finished />
                                    </el-icon>&nbsp;
                                    <span style="font-size:14px">新增用户</span>
                                </div>
                                <hr style="background:#dcdfe6;noshade='noshade'">
                                <p>48238 人</p>
                            </el-card>
                        </el-col>
                        <el-col :span="1"></el-col>
                        <el-col :span="7">
                            <el-card>
                                <div>
                                    <el-icon>
                                        <Help />
                                    </el-icon>&nbsp;
                                    <span style="font-size:14px">累计用户</span>
                                </div>
                                <hr style="background:#dcdfe6;noshade='noshade'">
                                <p>9828 万人</p>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value2 = ref('')




</script>

<style lang="scss" scoped>
.el-divider--horizontal {
    margin: 15px
}

.box-card1 {
    background: #34cc5f;
    color: white
}

.middle1 {
    margin: 20px 0
}

.box-card2 {
    background: #9150e8;
    color: white
}

.box-card3 {
    background: #458efd;
    color: white
}

.box-card4 {
    background: #ff7823;
    color: white
}


</style>